<template>
	<div class="messageList">
		<div class="searchBox">
			<el-input v-model="searchInput" placeholder="请输入内容" @keyup.enter.native="searchName" clearable @clear="searchName"
			 prefix-icon="el-icon-search">
				<el-button slot="append" icon="el-icon-search" @click="searchName"></el-button>
			</el-input>
		</div>
		<div class="listItem">
			<vue-scroll :ops="ops" style="width:100%;height:100%">
				<ul class="gsListBoxUl">
					<div class="iconLadingBox" v-show="contentIsLoading"><i class="el-icon-loading"></i></div>
					<div v-if="messageList.length > 0">
						<li class="gsListBoxLi flex" :class="item.isRemove?'isRemoveItem':gsListBoxLiIndex==item.id?'activeLi':''" v-for="(item, index) in messageList"
						 :key="item.id" @click="clickgsListBoxLi(item)">
							<img :src="item.head" alt="" class="messageLogo">
							<div class="messageInfos">
								<div class="messageTitles flex">
									<div class="messageInfoTitle">{{ item.name }}</div>
									<div class="messageInfoTime">{{ item.createDate }}</div>
								</div>
								<div class="messageInfoText">
									{{ item.sendContent }}
									<div class="msgNumTip" v-if="item.isReadCount > 0">{{ item.isReadCount>99?'99+':item.isReadCount}}</div>
								</div>
								<i class="el-icon-error deleteIcon" title="移除聊天" @click.stop="removeListItem(item,index)"></i>
							</div>
						</li>
					</div>

					<li v-else class="nodatas">暂无数据</li>
				</ul>
			</vue-scroll>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				userId: '',
				searchInput: '',
				gsListBoxLiIndex: '',
				messageList: [], // 消息列表
				searchMessageList: [], // 消息列表----搜索用
				contentIsLoading: false, // 搜索正在加载中的图标
				// 从联系人点击聊天带过来的id，
				sendToUsersId: '',
				chatType: '' // 聊天类型
			};
		},
		created() {

		},
		mounted() {
			let userInfo = this.$store.state.user.userInfo
			this.userId = userInfo.id
			// if (this.$route.query.id) {
				// 从联系人点击聊天带过来的id，
			this.sendToUsersId = sessionStorage.getItem('applyUserId')
			this.chatType = sessionStorage.getItem('applyChatType')
			// }
			// console.log(this.$route.query)
			this.getMsgList()
		},
		methods: {
			searchName() {
				// 搜索聊天列表
				// 由于后台多张表不方便查询一个字段，故而前端做搜索功能
				this.contentIsLoading = true
				setTimeout(() => {
					this.messageList = []
					// 判断当前搜索是否有数据，如果没有，返回所有数据
					if (this.searchInput) {
						// 过滤器判断name字段是否包含了当前搜索的关键词
						this.searchMessageList.filter(item => {
							// 如果有，返回true，则向数组添加数据
							if (item.name.includes(this.searchInput)) {
								this.messageList.push(item)
							}
						})
					} else {
						this.messageList = this.searchMessageList
					}
					this.contentIsLoading = false
				}, 1000)
			},
			removeListItem(item, index) {
				// 删除聊天列表
				if (item.isNew) {
					item.isRemove = true
					setTimeout(() => {
						this.messageList.splice(index, 1);
					}, 200)
				} else{
					this.$request.postForm(this.$api.removeMessageList, {
						messageId: item.chatId,
						userId: this.userId
					}).then(res => {
						if (res.code == 200) {
							// 删除动效
							item.isRemove = true
							// this.$forceUpdate()
							// 删除过后更新数据
							setTimeout(() => {
								this.getMsgList()
							}, 200)
						}
					})
				}
				this.$parent.$data.msgItemClickData = ''
				this.$parent.$data.chattingRecords = []
			},
			clickgsListBoxLi(item) {
				// 单击聊天列表，获取当前点击的聊天记录
				// 判断若当前点击的列表是已经点击过后的，不执行任何操作
				if (this.gsListBoxLiIndex !== item.id) {
					this.gsListBoxLiIndex = item.id
					this.$emit('clickMsgList', item)
					this.$parent.$data.chattingRecords = []
				}
			},
			getMsgList() {
				this.$request.get(this.$api.queryMessageList, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						// console.log(this.messageList)
						this.messageList = []
						// 赋值messageList用于展示列表searchMessageList用于搜索过滤
						this.searchMessageList = res.data
						this.messageList = this.searchMessageList
						// 为每一个对象加上一个是否删除的动效判断条件
						this.messageList.forEach(v => {
							v.isRemove = false
						})
						// sendToUsersId
						// 判断是否主动从我的联系人选择对象聊天
						if (this.sendToUsersId) {
							const chatNameData = this.messageList.filter(item=>{
								return item.userId === this.sendToUsersId
							})
							if (chatNameData[0]) {
								// 如果聊天列表有当前点击的聊天对象，放到最前面
								let chatNameFilter = this.messageList.filter(item=>{
									return item.userId !== this.sendToUsersId
								})
								this.$emit('clickMsgList', chatNameData[0])
								this.$parent.$data.msgItemClickData = chatNameData[0]
								chatNameData[0].isReadCount = 0
								chatNameFilter.unshift(chatNameData[0])
								this.messageList = chatNameFilter
								this.gsListBoxLiIndex = chatNameData[0].id
							} else{
								// 如果聊天列表没有点击的用户 创建一个聊天对象
									const addMsgData = {
										chatId: "",
										chatType: this.chatType,
										createDate: "",
										fromUserId: this.userId,
										head: "",
										id: this.userId,
										isReadCount: "0",
										isRemove: false,
										messageType: null,
										name: "",
										sendContent: "",
										sendType: null,
										toUserId: this.sendToUsersId,
										isNew: true,
										userId: this.sendToUsersId
									}
									if(this.chatType == '0'){
										// 个人
										this.$request.get(this.$api.findUserIdQuery, {
											userId: this.sendToUsersId
										}).then(res => {
											if (res.code == 200) {
												let data = res.data
												addMsgData.id = data.id
												addMsgData.head = data.head
												addMsgData.name = data.name
												this.$emit('clickMsgList', addMsgData)
												this.$parent.$data.msgItemClickData = addMsgData
												this.messageList.unshift(addMsgData);
												this.gsListBoxLiIndex = addMsgData.id
											}
										})
									} else if(this.chatType == '1'){
										// 公司
										this.$request.get(this.$api.companyGetDetails, {
											companyId: this.sendToUsersId
										}).then(res => {
											if (res.code == 200) {
												let data = res.data
												addMsgData.id = data.id
												addMsgData.head = data.companyLogo
												addMsgData.name = data.companyName
												this.$emit('clickMsgList', addMsgData)
												this.$parent.$data.msgItemClickData = addMsgData
												this.messageList.unshift(addMsgData);
												this.gsListBoxLiIndex = addMsgData.id
											}
										})
									} else if(this.chatType == '2'){
										// 部门getDepartmentMssage
										this.$request.get(this.$api.getDepartmentMssage, {
											id: this.sendToUsersId
										}).then(res => {
											if (res.code == 200) {
												let data = res.data
												addMsgData.id = data.id
												addMsgData.head = data.logoPath
												addMsgData.name = data.name
												this.$emit('clickMsgList', addMsgData)
												this.$parent.$data.msgItemClickData = addMsgData
												this.messageList.unshift(addMsgData);
												this.gsListBoxLiIndex = addMsgData.id
											}
										})
									}
									
							}
						} else {
							// 判断gsListBoxLiIndex为空,则代表刚进入页面
							if (this.messageList.length > 0) {
								this.messageList[0].isReadCount = 0
								this.$emit('clickMsgList', this.messageList[0])
								this.gsListBoxLiIndex = this.messageList[0].id
							}
						}
						// 清空从聊天列表选择的数据
						sessionStorage.removeItem('applyUserId')
						this.sendToUsersId = ''
					}
				})
			}
		},

	};
</script>

<style scoped="scoped">
	.messageList {
		padding: 10px 0;
		width: 340px;
		border-right: 1px solid #DCDCDC;
		height: 698px;
	}

	.searchBox {
		padding: 0 20px 10px 20px;
	}

	.listItem {
		width: 100%;
		height: 636px;
		overflow: hidden;
	}

	.gsListBoxLi {
		width: 100%;
		height: 60px;
		padding: 10px 20px;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		position: relative;
		transition: all 0.4s;
	}

	.gsListBoxUl {
		position: relative;
	}

	.iconLadingBox {
		/* position: absolute; */
		top: 0;
		text-align: center;
		width: 50%;
		margin-left: 25%;
		margin-bottom: 10px;
	}

	.deleteIcon {
		position: absolute;
		color: darkred;
		right: 2px;
		top: 2px;
		display: none;
	}

	.gsListBoxLi:hover .deleteIcon {
		display: block;
	}

	.isRemoveItem {
		animation: 0.4s removeItem;
		-ms-animation: 0.4s removeItem;
		-webkit-animation: 0.4s removeItem;
		-moz-animation: 0.4s removeItem;
	}

	@keyframes removeItem {
		from {
			left: 10px;
		}

		to {
			left: -100%;
		}
	}

	@-ms-keyframes removeItem {
		from {
			left: 10px;
		}

		to {
			left: -100%;
		}
	}

	@-webkit-keyframes removeItem {
		from {
			left: 10px;
		}

		to {
			left: -100%;
		}
	}

	@-moz-keyframes removeItem {
		from {
			left: 10px;
		}

		to {
			left: -100%;
		}
	}

	.activeLi {
		background: rgba(35, 177, 77, 0.08);
	}

	.messageLogo {
		width: 40px;
		height: 40px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.messageTitles {
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.messageInfoTitle {
		width: 170px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 10px;
	}

	.messageInfoTime,
	.messageInfoText {
		color: #AAAAAA;
		font-size: 12px;
	}

	.messageInfoText {
		/* margin-top: 10px; */
		line-height: 26px;
		width: 245px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: relative;
		padding-right: 60px;
	}

	.nodatas {
		width: 100%;
		line-height: 32px;
		font-size: 12px;
		text-align: center;
		color: #AAAAAA;
	}

	.msgNumTip {
		min-width: 16px;
		height: 16px;
		background: red;
		color: #FFFFFF;
		text-align: center;
		line-height: 16px;
		border-radius: 10px;
		padding: 0 2px;
		position: absolute;
		z-index: 5;
		top: 5px;
		right: 1px;
		font-size: 10px;
	}
</style>
